<template>
	<div class="user_login">
		<h1 class="title">社会数-博客会员登录</h1>

		<el-form ref="login_form1" :label-position="labelPosition" label-width="80px" :model="loginform"
			:rules="login_rules">
			<el-form-item label="用户名" prop="userName">
				<el-input v-model="loginform.userName" />
			</el-form-item>

			<el-form-item label="密码" prop="password">
				<el-input v-model="loginform.password" type="password" show-password />
			</el-form-item>

			<el-form-item>
				<el-button round type="primary" @click="onSubmit">立即登录</el-button>
				<el-button round @click="dialogFormVisible = true">注册</el-button>
			</el-form-item>
		</el-form>

		<!-- 注册弹窗 -->
		<el-dialog width="400px" title="会员注册" :visible.sync="dialogFormVisible">
			<el-form :model="regform" ref="regform1" :rules="login_rules" label-width="80px">
				<el-form-item label="用户名" prop="userName">
					<el-input v-model="regform.userName" autocomplete="off" />
				</el-form-item>

				<el-form-item label="密 码" prop="password">
					<el-input v-model="regform.password" type="password" show-password autocomplete="off" />
				</el-form-item>

				<el-form-item label="邮 箱" prop="email">
					<el-input v-model="regform.email" autocomplete="off" />
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit_reg('regform1')">
					注册
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		userLogin,
		userReg
	} from '@/request/api'

	export default {
		name: 'UserLogin',
		data() {
			return {
				formLabelWidth: '80px',
				dialogFormVisible: false,
				labelPosition: 'right',
				loginform: {
					userName: 'admin',
					password: '123456'
				},
				regform: {
					userName: null,
					password: null,
					email: null
				},
				login_rules: {
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					],
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '长度在 6 到 16 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			/* 登录 */
			onSubmit() {
				this.$refs.login_form1.validate(valid => {
					if (!valid) return

					userLogin(this.loginform)
						.then(resp => {
							if (resp?.data?.code === 2000) {
								localStorage.setItem('guest', JSON.stringify(resp.data.data))
								this.$message({
									message: resp.data.msg,
									type: 'success'
								})
								this.$router.replace('/')
							} else {
								this.$message({
									message: resp.data.msg,
									type: 'warning'
								})
							}
						})
						.catch(err => {
							this.$message({
								message: err.toString(),
								type: 'error'
							})
						})
				})
			},

			/* 注册 */
			onSubmit_reg(formName) {
				this.$refs[formName].validate(valid => {
					if (!valid) return

					userReg({
							email: this.regform.email,
							userName: this.regform.userName,
							password: this.regform.password
						})
						.then(res => {
							if (res?.data?.code === 200) {
								this.$message({
									message: '注册成功',
									type: 'success'
								})
								this.$confirm('前往登录').then(() => {
									this.loginform.userName = res.data.data.userName
									this.loginform.password = res.data.data.password
									this.dialogFormVisible = false
								}).catch(() => {
									this.dialogFormVisible = false
								})
							} else {
								this.$message({
									message: res.data.msg,
									type: 'error'
								})
							}
						})
						.catch(err => {
							console.error(err)
							this.$message({
								message: err.toString(),
								type: 'error'
							})
						})
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		color: #078cb1;
		margin-bottom: 50px;
	}

	.user_login {
		width: 400px;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -200px -250px;
	}
</style>